<template>
  <div>
    <img class="ban_img" src="https://s1.ax1x.com/2020/08/18/dK96uF.jpg" />

    <div class="con">
      <div class="flex_bw">
        <i class="el-icon-arrow-left" @click="back" style="font-size: 25px;color:white"></i>
        <el-input placeholder="请输入内容" size="mini" v-model="input1" style="width:60vw">
          <template slot="prepend">
            <div style="30px">
              <span>上海</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </template>
        </el-input>
        <i class="el-icon-s-home" style="font-size: 25px;color:white"></i>
      </div>
      <!--  -->
      <div class="top_btm">
        <div>
          <span style="font-size:20px">上海</span>
          <span>shanghai</span>
        </div>

        <div style="margin-top: 10px;">
          <span>晴 27~35℃</span>
          <span>80600张照片</span>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <div style="height: 15px;"></div>

    <div class="lateral-sliding con">
      <div class="lateral-sliding-item" v-for="(a,b) in top_tab" :key="a.name">
        <div class="item_box" >
          <img :src="a.img" class="tab_icon" />
          <p style="font-size: 13px; margin-top:5px ;">{{a.name}}</p>
        </div>
      </div>
    </div>
    <!-- 占位分割 -->
    <div style="height: 5px;background-color: #EAEDED;"></div>
    <!-- 上海旅游 -->
    <div class="con flex_center" >
      <p class="con_tit">上海旅游</p>
      <p class="con_text">上海，被称为“东方的巴黎”，东西方文化在此融汇交织，造就了洋气的海派风情。它是曾经的“十”..</p>
      <div class="flex_bw" style="flex-wrap: wrap; ">
        <el-tag type="info" v-for="i in tag_arr" :key="i" style="margin-top: 10px;">{{i}}</el-tag>
      </div>
      <div style="height: 1px;background-color: #F2F3F4 ;width:100%;margin-top: 10px;"></div>
      <div style="color:#5DADE2; margin-top: 10px;">更多上海旅游攻略</div>
    </div>
    <!-- 上海旅游end -->
    <!-- 占位分割 -->
    <div style="height: 5px;background-color: #EAEDED;"></div>
    <!-- 热门 -->
    <div class="con flex_center">
          <p class="con_tit">当地热门</p>
          <div class="flex_bw " style="margin-top: 10px;width:100%;">
             <div :class="a.id==ren_index?`remen_btn flex_center active `:`remen_btn flex_center` " @click="choose_ren(b)" v-for="(a,b) in remen_tab_list" :key="a.name">{{a.name}}</div>
          </div>
    </div>
          
    <div class="lateral-sliding con ">
      <div class="lateral-sliding-item"  v-for="(a,b) in ren_data" :key="a.tit">
        <div class="item_box">
          <img :src="a.img" class="con_img" />
          <p style="font-size: 15px; margin-top:10px ;">{{a.tit.length>6?a.tit.substr(0,5)+'...':a.tit }}</p>
          <p style="font-size: 13px; margin-top:10px ;color:#85C1E9">4.8分</p>
        </div>
      </div>
      <i class="el-icon-back" style="margin-top: 30px;"></i>
      <div >
        查看更多
      </div>
      <div style="width:50px;color:white">12</div>
    </div>
   
    <!-- 热门end -->
     <!-- 占位分割 -->
    <div style="height: 5px;background-color: #EAEDED;"></div>

    <!-- 特色菜 -->
    <div class="con flex_center">
        <p class="con_tit">上海必吃特色菜</p>  
    </div>
     <div class="lateral-sliding con ">
      <div class="lateral-sliding-item" v-for="(i,k) in tese" :key="i.tit">
        <div class="item_box">
          <img :src="i.img" class="con_img" />
          <div style="width:100%">
              <p style="font-size: 15px; margin-top:10px ;">{{i.tit}}</p>
          </div>
        
          <!-- <p style="font-size: 13px; margin-top:5px ;color:#85C1E9">4.8分</p> -->
        </div>
      </div>
      <i class="el-icon-back" style="margin-top: 30px;"></i>
      <div >
        查看更多
      </div>
      <div style="width:50px;color:white">12</div>
    </div>
    <!-- 特色菜 end -->
       <div style="height: 5px;background-color: #EAEDED;"></div>
     <!-- 住宿 -->
     <div class="con flex_center">
        <p class="con_tit">上海推荐住宿区域</p>  
    </div>
     <div class="lateral-sliding con flex_bw">
      <div class="lateral-sliding-item" style="margin-right:0px" v-for="i in zhu" :key="i">
        <div class="item_box" >
          <img :src="i.img" class="con_img" />
          <div class="zhu_con">
            <p>{{i.tit}}</p>
            <p style="font-size:13px;margin-top:5px">555家酒店</p>
            <div class="zhu_box flex_center">
              <span>6.9%的客户选择</span>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="flex_center">
       <div style="height: 1px;background-color: #F2F3F4 ;width:100%;margin-top: 10px;"></div>
      <div style="color:#5DADE2; margin-top: 10px;">更多上海酒店</div>
    </div>
    <!-- 住宿end -->
 <div style="height: 5px;background-color: #EAEDED;margin-top: 10px;"></div>
    <!-- 路线 -->
    <div class="con flex_center" >
       <p class="con_tit">上海旅游路线</p>
    </div>
    <div class="con flex_bw" v-for="(a,b) in luxian" :key='a.tit'>
   <img :src="a.img" class="con_img"/>
   <div class="right_box">
    <p class="con_text">{{a.tit.length>20?a.tit.substr(0,20)+'...':a.tit }}</p>
     <div class="flex_bw">
       <el-tag type="warning" size="small" style="font-size: 10px;">2砖石</el-tag>
        <span>¥ 7898</span>
     </div> 
   </div>
    </div>
    <div class="flex_center">
       <div style="height: 1px;background-color: #F2F3F4 ;width:100%;margin-top: 10px;"></div>
      <div style="color:#5DADE2; margin-top: 10px;">更多上海旅游路线</div>
    </div>
    <!-- 路线end  -->
        <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
    <!-- 热门游记 -->
    <div class="con flex_center">
        <p class="con_tit">上海热门游记</p>  
    </div>

 <div class="con flex_bw" v-for="(a,b) in youji" :key="a.tit">
   
   <div class="right_box">
    <p class="con_text">{{a.tit.length>25?a.tit.substr(0,25)+'...':a.tit }}</p>
     <div class="flex_bw">
       <!-- <el-tag type="warning" size="small" style="font-size: 10px;">2砖石</el-tag> -->
        <!-- <span>¥ 7898</span> -->
     </div> 
   </div>
   <img :src="a.img" class="con_img"/>
    </div>
    <div class="flex_center">
       <div style="height: 1px;background-color: #F2F3F4 ;width:100%;margin-top: 10px;"></div>
      <div style="color:#5DADE2; margin-top: 10px;">查看上海游记</div>
    </div>
    <!-- end -->
 <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
     <!-- 旅游行程 -->
    <div class="con flex_center">
        <p class="con_tit">上海旅游行程</p>  
    </div>

 <div class="con flex_bw" v-for="(i,k) in trip" :key="i.tit">
   
   <div class="right_box">
    <p class="con_text">{{i.tit}}</p>
     <div class="">
       <el-tag type="warning" size="small" style="font-size: 10px;">经典</el-tag>
        <p class="hui_1">共两天。15个景点</p>
     </div> 
   </div>
   <img :src="i.img" class="con_img"/>
    </div>
    <div class="flex_center">
       <div style="height: 1px;background-color: #F2F3F4 ;width:100%;margin-top: 10px;"></div>
      <div style="color:#5DADE2; margin-top: 10px;">上海旅游行程大全</div>
    </div>

    <!-- end -->
     <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
    <!-- 出行超市 -->
     <div class="con flex_center">
        <p class="con_tit">出行超市</p>  
    </div>
    <div class="con flex_bw wrap" >
     <div class="shop_box flex_bw"  v-for="(i,k) in  ren_index==0?super_list:ren_index==1?jiudian_list:meishi_list" :key="k">
      <img :src="i.icon" class="super_img"/>
      <div style="margin-right:5px ;">
       <p>{{i.name}}</p>
       <p class="hui_1">{{i.extra}}</p>
      </div>
    </div>
    </div>
    <!-- 超市end -->
    <div style="height: 5px;background-color: #EAEDED;margin-top: 10px"></div>
    <!-- 其它人 -->
     <div class="con flex_center">
        <p class="con_tit">看了此目的地的人还看了</p>  
    </div>
    <div class="lateral-sliding con ">
      <div class="lateral-sliding-item" v-for="i in tese" :key="i">
        <div class="item_box">
          <img :src="i.img" class="con_img" />
          <div style="width:100%">
              <p style="font-size: 18px; margin-top:-25px ;margin-left: 5px;color: white;">{{i.tit.substr(0,2)}}</p>
          </div>
        
        </div>
      </div>
      
    </div>

    <!-- end  -->
     
  </div>
</template>

<script>
export default {
  name: "Strategy",
  data() {
    return {
      ren_index:0,
      input1: "",
      zhu:[
        {
          img:'https://dimg04.c-ctrip.com/images/200n0s000000hhavcFF0F_R_220_150.jpg',
          tit:'上海宝安酒店'
        },
        {
          img:'https://dimg04.c-ctrip.com/images/200315000000y1s5y4844_R_220_150.jpg',
          tit:'云和夜泊酒店'
        },
        {
          img:'https://dimg04.c-ctrip.com/images/200k190000017yemt95B8_R_220_150.jpg',
          tit:'上海迪堡酒店'
        },
      ],
      tag_arr:['第一次来上海','新年嗨起来','迪士尼亲子游','星巴克烘焙','老字号小吃','周边温泉推荐'],
      trip:[//行程数据
         {
           img:'https://youimg1.c-ctrip.com/target/100e0h0000008rp39A12F_D_220_150.jpg',
           tit:'魅力繁华之都，上海经典2日游'
         },
         {
           img:'https://youimg1.c-ctrip.com/target/10031d000001ee8jh16F0_D_220_150.jpg',
           tit:'迪士尼畅玩攻略，上海欢乐3日游'
         }
      ],
      youji:[
        {
          img:'https://dimg03.c-ctrip.com/images/100o13000000v64ek447B_C_238_268.jpg',
          tit:'五一出行还没有规划？走，去南方“吃春天”，用胃承包江浙沪'
        },
        {
          img:'https://youimg1.c-ctrip.com/target/100b15000000xwe4h9615_R_300_300_Q90.jpg',
          tit:'上海特色餐厅推荐，每家都可成为回头客'
        },
        {
          img:'https://youimg1.c-ctrip.com/target/1005180000014h06cB052_R_300_300_Q90.jpg',
          tit:'上海居然还有这等小众秘境，跟着狼爪X松赞#守护香巴拉#探秘佘山国家森林公园'
        }
      ],
      luxian:[
        {
          img:'https://dimg04.c-ctrip.com/images/300i170000010rx4f01F5_C_228_170.jpg',
          tit:'上海+迪士尼度假区+东方明珠3日私家团(5钻)·纯玩无购物无自费 亲子游力荐【上海东方明珠+迪士尼畅游1整天】2晚5钻酒店连住 轻松不挪窝 '
        },
        {
          img:'https://dimg03.c-ctrip.com/images/100d0y000000ltinu009D_C_228_170.jpg',
          tit:'上海+苏州+杭州+迪士尼度假区5日4晚跟团游·【承诺全程0购物】  畅游迪士尼乐园一日  '
        }
      ],
      tese:[
        {
        tit:'生煎',
        img:'https://dimg07.c-ctrip.com/images/tg/282/336/173/17d9df7bed614950bc08b9f2a225f6a2_C_220_150.jpg'
      },
       {
        tit:'上海小笼包',
        img:'https://dimg08.c-ctrip.com/images/1006080000003e1eu4999_C_220_150.jpg'
      },
       {
        tit:'葱油拌面',
        img:'https://dimg07.c-ctrip.com/images/tg/860/675/987/0e83777abed14372be5a3d59033c1693_C_220_150.jpg'
      },
       {
        tit:'八宝辣酱',
        img:'https://dimg07.c-ctrip.com/images/tg/980/731/955/a7dd9e01bccf451fac642b1226a0005b_C_220_150.jpg'
      },
      {
        tit:'糖醋小排',
        img:'https://dimg01.c-ctrip.com/images/tg/991/587/696/8efe5a3ec6d94546a040c1c16c8f3c42_C_220_150.jpg'
      }
      
      ],
      ren_data:[],
      jing_list:[
        {
          img:'https://dimg08.c-ctrip.com/images/10091f000001gsosc9E10_C_220_150.jpg',
          tit:'外滩'
        },
        {
          img:'https://dimg02.c-ctrip.com/images/100w1f000001gw9498A72_C_220_150.jpg',
          tit:'东方明珠'
        },
        {
          tit:'上海迪士尼度假区',
          img:'https://dimg02.c-ctrip.com/images/10051f000001gsqk8D0BC_C_220_150.jpg'
        }
      ],
      jiudian_list:[
        {
          img:'https://dimg04.c-ctrip.com/images/200n0s000000hhavcFF0F_R_220_150.jpg',
          tit:'上海宝安大酒店'
        },
        {
          img:'https://dimg04.c-ctrip.com/images/200315000000y1s5y4844_R_220_150.jpg',
          tit:'云和夜泊酒店'
        },
        {
          img:'https://dimg04.c-ctrip.com/images/200k190000017yemt95B8_R_220_150.jpg',
          tit:'上海迪堡王国酒店'
        }
      ],
      meishi_list:[
        {
          img:'https://dimg08.c-ctrip.com/images/1001080000003j6jt5DAE_C_220_150.jpg',
          tit:'锦江夜上海'
        },
        {
          img:'https://dimg04.c-ctrip.com/images/10030u000000ji6qiEB8B_C_220_150.jpg',
          tit:'成隆行蟹王府'
        },
        {
          img:'https://dimg03.c-ctrip.com/images/100c080000003j6qa0143_C_220_150.jpg',
          tit:'梅龙镇酒家'
        }
      ],
      super_list:[
        {
          icon:'../../../static/shop/fei.png',
          name:'特价机票',
          extra:'超值低价'
        },
        {
          icon:'../../../static/shop/fei.png',
          name:'自由行',
          extra:'组合随心'
        },
        {
          icon:'../../../static/shop/fei.png',
          name:'跟团游',
          extra:'无忧出行'
        },
        {
          icon:'../../../static/shop/fei.png',
          name:'一日游',
          extra:'当地玩乐'
        },
        {
          icon:'../../../static/shop/fei.png',
          name:'当地向导',
          extra:'接送自驾'
        },
        {
          icon:'../../../static/shop/fei.png',
          name:'租车用车',
          extra:'接送自驾'
        },
      ],
      top_tab:[
        { name:'景点',
          img:'https://youimg1.c-ctrip.com/target/100o0s000000hmcopBF88.png',
        },
        { name:'酒店',
          img:'https://youimg1.c-ctrip.com/target/10030s000000hp8mcF0AC.png',
        },
        { name:'美食林',
          img:'https://youimg1.c-ctrip.com/target/100g13000000vip4jE518.png',
        },
        { name:'购物',
          img:'https://youimg1.c-ctrip.com/target/100h0s000000hotzu3F14.png',
        },
        { name:'跟团游',
          img:'https://youimg1.c-ctrip.com/target/100n0s000000hmkjy5C32.png',
        },
        { name:'当地玩乐',
          img:'https://youimg1.c-ctrip.com/target/100q10000000q3z80CFCD.png',
        },
        { name:'自由行',
          img:'https://youimg1.c-ctrip.com/target/10010u000000ja60tC5EC.png',
        },
        { name:'周边游',
          img:'https://youimg1.c-ctrip.com/target/100d0w000000km9ipA806.png',
        },
      ],
      remen_tab_list: [{
        id:0,
        name:'景点'
      },{
        id:1,
        name:'酒店'
      },
      {
        id:2,
        name:'美食'
      },
      {
        id:3,
        name:'购物'
      },
      ],

    };
  },
  mounted() {},
  created() {
    this.ren_data=this.jing_list;
  },
  methods: {
    back(){
      this.$router.go(-1);
    },
    choose_ren(e){
      this.ren_index=e;
      console.log(this.ren_index);
      if(e==0) return this.ren_data=this.jing_list;
      if(e==1) return this.ren_data=this.jiudian_list;
      if(e==2||e==3) return this.ren_data=this.meishi_list;
    }
  },
};
</script>

<style scoped>
.zhu_box{
  opacity: .8;
  /* width: 80%; */
  height: 20px;
  background-color: #fff;
  color: #34495E;
  font-size: 10px;
  margin-top: 5px;
}
.zhu_con{
  color: white;
  position: absolute;
  
  margin-top: 2vw;
}
.hui_1{
  font-size: 13px;
  color: #BDC3C7 ;
  margin-top: 5px;
  
}
.super_img{
  width: 6vw;
  height: 6vw;
  margin-left: 5px;
}
.wrap{
  flex-wrap: wrap;
}
.shop_box{
  width: 28vw;
  height: 16vw;
  margin-top: 2vw;
  border: 1px solid #E5E7E9 ;
}
.right_box{
  width: 60%;
  height: 100%;

}
.con_img{
  
   width: 100px;
   height: 70px;
  
}
.active{
  color: white;
  background-color: #5DADE2;
}
.remen_btn{
  width: 20vw;
  height: 30px;
  border: 1px solid #F2F3F4  ;
}
.con_tit{
  font-size: 18px;
 
}
.con_text{
  font-size: 15px;
  color: #34495E;
  margin-top: 10px;
  line-height: 20px;
}
.tab_icon {
  widows: 60px;
  height: 60px;
}
.top_btm {
  color: white;
  margin-top: 13vh;
}
.top_icon {
  color: white;
  font-size: 18px;
}
.flex_bw {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.flex_center{
  display: flex;
  align-items: center;
  justify-content: center;
 
  flex-direction: column;
}
.con {
  padding: 15px;
  
}
.ban_img {
  width: 100vw;
  height: 30vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.hearder_input {
  align-items: center;
}
.lateral-sliding {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;

}
.lateral-sliding::-webkit-scrollbar {
  display: none;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  /* background-color: yellow; */
}
.item_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
